<template>
	<view class="page wallet-panel">
		<view class="wallet-header">
			<nav-header left-icon-color="white" title="钱包" :show-right="false" bg-color="transparent" :fixed="false"
				:show-border="false" title-color="white"></nav-header>
			<view class="head-content">
				<view class="price-panel">
					<view class="price-num">
						<view class="value">
							{{ balance }}
						</view>
						<view class="unit">
							￥
						</view>
					</view>
					<view class="text">
						可用余额
					</view>
				</view>
			</view>
			<!-- #ifndef APP-PLUS -->
			<view class="func-panel">
				<view class="func-item" @click="goPage(item.path)" v-for="(item,index) in funcList" :key="item.name">
					<view v-if="funcMap[item.key]" class="func-item">
						<view class="icon">
							<svg-icon :icon="item.icon" :width="50"></svg-icon>
						</view>
						<view class="name">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view v-if="filterList.length == 0" style="margin-top: 10vh;">
			<up-empty :icon="getResource('/icon/empty-message.svg')" text="暂无数据">
			</up-empty>
		</view>
		<view class="card" v-else>
			<view class="card-head">
				<view class="card-title">
					交易记录
				</view>
				<view class="card-right-content" @tap.native.stop="goAll">
					<text>查看全部</text>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="card-content" v-for="it in filterList" :key="it.title">
				<view class="title">
					{{it.title}}
				</view>
				<view class="trade-panel">
					<view class="trade-item" v-for="item in it.items" :key="it.title" @tap.native.stop="goDetail(item)">
						<view class="icon">
							<svg-icon :width="70" icon="提现2" v-if="item.fee < 0"></svg-icon>
							<svg-icon :width="70" icon="充值2" v-if="item.fee>0 && item.targetType==0"></svg-icon>
							<svg-icon :width="70" icon="注册" v-if="item.fee>0 && item.targetType==3"></svg-icon>
						</view>
						<view class="title">
							<view class="text">{{ item.desc }}</view>
							<view class="value">
								<text class="symbol">{{ item.fee > 0 && "+" || '-' }}</text>
								<text class="price-abs">{{ Math.abs(item.fee) }}</text>
							</view>
						</view>
						<view class="time">
							{{ item.createTime }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				walletInfo: {},
				currentTitle: "",
				filterList: [],
				funcList: [{
					name: "充值",
					icon: "充值",
					key: "qb_cz",
					path: "/pageSubOne/wallet/wallet-transfer?type=Pay"
				}, {
					name: "提现",
					icon: "提现",
					key: "qb_tx",
					path: "/pageSubOne/wallet/wallet-transfer?type=Withdrawal"
				}],
				tradeList: [{
					content: "购买【东莞市官方群】群主购买【东莞市官方群】群主购买【东莞市官方群】群主购买【东莞市官方群】群主",
					realPayAmount: -99,
					createTime: "11:59"
				}, {
					content: "邀请活动奖励",
					realPayAmount: 99,
					createTime: "11:59"
				}]
			}
		},
		computed: {
			balance() {
				return this.walletInfo.balanceFee || 0
			},
			funcMap() {
				return this.enableStore.funcMap
			}
		},
		methods: {
			_getData() {
				this.$http({
					url: `/wallet/info`,
					method: 'GET'
				}).then(res => {
					console.log(res)
					this.walletInfo = res
					this.walletInfo.balanceFee = this.walletInfo.balanceFee.toFixed(2)
					// this.tradeList = res.order
				})

				this.$http({
					url: `/wallet/log/list`,
					method: 'GET',
					data: {
						pageSize: this.tradeList && this.tradeList.pageSize || 20,
						pageNum: this.tradeList && this.tradeList.pageNum || 1,
					}
				}).then(res => {
					console.log(res)
					this.tradeList = res.list
					this.tradeList.forEach(item => {
						item.createTime = item.createAt.slice(11, 16)
					})

					const grouped = this.tradeList.reduce((acc, item) => {
						const date = item.createAt.slice(0, 10)
						if (!acc[date]) {
							acc[date] = []
						}
						acc[date].push(item)
						return acc
					}, {})

					this.filterList = Object.keys(grouped).map(date => ({
						date: date,
						items: grouped[date]
					})).slice(0, 3)

					// 获取今天和昨天的日期
					const today = new Date();
					const yesterday = new Date(today);
					yesterday.setDate(today.getDate() - 1);
					// 格式化日期为字符串
					const todayStr = today.toISOString().split('T')[0];
					const yesterdayStr = yesterday.toISOString().split('T')[0];

					this.filterList.forEach(item => {
						if (item.date == todayStr) {
							this.$set(item, 'title', '今日')
						} else if (item.date == yesterdayStr) {
							this.$set(item, 'title', '昨日')
						} else {
							this.$set(item, 'title', item.date)
						}
					})

					console.log(this.filterList)
				})
			},
			goAll() {
				uni.navigateTo({
					url: "/pageSubOne/wallet/wallet-record"
				})
			},
			goDetail(item) {
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: `/pageSubOne/wallet/wallet-detail?data=${data}`
				})
			}
		},
		onShow() {
			this._getData()
		},
	}
</script>

<style scoped lang="scss">
	.wallet-panel {
		.wallet-header {
			background-color: $brand-500;
			color: white;

			.func-panel {
				padding: 20rpx 0 50rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.func-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 25rpx;

					.icon {
						border: 1px solid white;
						width: 60rpx;
						height: 60rpx;
						border-radius: 15rpx;
						padding: 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.name {
						font-weight: bold;
						font-size: 23rpx;
					}
				}
			}

			.head-content {
				padding: 50rpx 0 20rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				.price-panel {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 20rpx;

					.price-num {
						display: flex;
						align-items: flex-start;
						justify-content: space-around;

						.value {
							font-size: 60rpx;
							font-weight: bold;
						}

						.unit {
							font-weight: bold;
							font-size: 25rpx;
						}

					}

					.text {
						font-size: 25rpx;
					}
				}
			}
		}
	}

	.card {
		padding: 20rpx;
		background-color: white;

		.card-head {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.card-title {
				font-size: 30rpx;
				font-weight: bold;
			}

			.card-right-content {
				font-size: 25rpx;
				display: flex;
				align-items: center;
				gap: 10rpx;
			}
		}

		.card-content {
			padding: 40rpx 0;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			gap: 40rpx;

			.trade-panel {
				display: flex;
				flex-direction: column;
				width: 100%;

				.trade-item:first-child {
					border-top: 1px solid #F2F6FC;
				}

				.trade-item {
					display: flex;
					align-items: center;
					padding: 20rpx;
					border-bottom: 1px solid #F2F6FC;

					.title {
						padding: 0 20rpx;
						display: flex;
						flex-direction: column;
						gap: 20rpx;

						.text {
							position: relative;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 30rpx;
						}

						.value {
							font-weight: bold;
							display: flex;
							gap: 8rpx;
							align-items: center;
							justify-content: flex-start;

							.price-abs {
								font-size: 30rpx;
							}
						}
					}

					.time {
						flex: 1;
						padding-left: 20rpx;
						color: #909399;
						font-size: 22rpx;
						text-align: right;
					}
				}
			}
		}
	}
</style>